<style>
    .dhh-homepage-tab {
        height: 789px;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
</style>
<div id="dhh-homepage" class="show_page_content">
    <!-- 顶部按钮 -->
    <div class="top_btn">
        <div class="input-line auto_20">
            <label for="">渠道商:</label>
            <input type="text" placeholder="请输入渠道商" id="channel_name">
        </div>
        <div class="input-line auto_20">
            <label for="">手机:</label>
            <input type="text" placeholder="请输入手机" id="tel_phone">
        </div>
        <div class="input-line auto_20">
            <label for="">平台:</label>
            <select name="" id="">
                    {foreach $platform_list as $key}
                    <option value="{$key.typeid}">{$key.pname}</option>
                    {/foreach}
            </select>
        </div>
        <div class="input-line auto_20">
            <label for="">日期:</label>
            <input type="text" placeholder="请输入开始时间" class="stime">
        </div>
        <div class="input-line auto_20">
            <label for="" style="float:left;text-align: center">--</label>
            <input type="text" placeholder="请输入结束时间" class="etime">
        </div>
        <div class="input-line auto_20">
            <label for="">实名:</label>
            <select name="" id="real_name">
                    <option value="3">全部</option>
                    <option value="0">未审核</option>
                    <option value="1">已审核</option>
                    <option value="2">审核中</option></select>
        </div>
        <div class="layui-btn input-line" id="hometotal-search"><i class="fa fa-search"></i>搜索</div>
        <div class="layui-btn input-line" id="hometotal-search"><i class="fa fa-download"></i>导出数据</div>
    </div>
    <div class="dhh-homepage-tab">
        <table id="dhh-homepage-table"></table>
    </div>
</div>
<script>
    layui.use(["laydate"], function() {
        var laytab = layui.table;
        //laydate 时间控件
        function laydateOPtion(ele, fn) {
            return {
                elem: ele, //需显示日期的元素选择器
                event: 'click', //触发事件
                type: "datetime",
                istime: false, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                festival: true, //是否显示节日
                lang: "zh-CN",
                max: (function() {
                    var d = new Date();
                    var y = d.getFullYear();
                    var m = d.getMonth() + 1;
                    var dy = d.getDate();
                    return y + "-" + zero(m) + "-" + zero(dy);
                }()),
                fixed: false, //是否固定在可视区域
                zIndex: 99999999, //css z-index
                btns: ['confirm'],
                done: fn,
            }
        }
        layui.laydate.render(laydateOPtion("#dhh-homepage .stime",
            function(value, date, endDate) {
                var eDateStr = $("#dhh-homepage .etime").val();
                var sDateStr = value;
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("开始时间不能小于等于结束时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));
        layui.laydate.render(laydateOPtion("#dhh-homepage .etime",
            function(value, date, endDate) {
                var eDateStr = value;
                var sDateStr = $("#dhh-homepage .etime").val();
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("结束时间不能小于等于开始时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));
        //设置表容器宽度
        var tabHeight = $("#dhh-homepage").height() - 90;
        $("#dhh-homepage .dhh-homepage-tab").height(tabHeight);
        renderTable();

        function zero(m) {
            return m < 10 ? "0" + m : m;
        }

        function renderTable() {
            laytab.render({
                elem: '#dhh-homepage-table',
                height: tabHeight,
                url: "/users/user_list",
                method: "get",
                response: {
                    statusCode: 1 //规定成功的状态码，默认：0
                },
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                        ,
                    limitName: 'lines' //每页数据量的参数名，默认：limit
                },
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.rows //解析数据列表
                    }
                },
                cols: [{
                    title: "ID",
                    field: "uid",
                }, {
                    title: "用户名",
                    field: "username",
                }, {
                    title: "手机",
                    field: "mobile",
                }, {
                    title: "来源",
                    field: "from",
                }, {
                    title: "二级渠道",
                    field: "d_name",
                }, {
                    title: "芝麻分",
                    field: "zhimafen",
                }, {
                    title: "实名情况",
                    field: "is_name",
                    templet: function(d) {
                        if (d == "1") {
                            return "<span class='background:#5FB878;'>已实名</span>";
                        } else if (d == "0") {
                            return "<span class='background:#FF5722;'>未激活</span>";
                        } else if (d == "2") {
                            return "<span class='background:#c2c2c2;'>未知状态</span>";
                        }
                    }
                }, {
                    title: "真实姓名",
                    field: "real_name",
                }, {
                    title: "民族",
                    field: "mingzu"
                }, {
                    title: "sex",
                    field: "性别",
                    templet: function() {
                        if (d == "0") {
                            return "保密";
                        } else if (d == "1") {
                            return "男";
                        } else if (d == "2") {
                            return "女";
                        }
                    }
                }, {
                    title: "city",
                    field: "城市",
                }, {
                    title: "身份证",
                    field: "card_no"
                }, {
                    title: "芝麻分",
                    field: "zhimafen",
                }, {
                    title: "管理",
                    field: "opraty",
                    templet: function() {
                        return "<i class='fa fa-edit'></i><i class='fa fa-delete'></i>"
                    }
                }],
                page: true,
                limits: [20, 50, 100],
                loading: true,
                text: {
                    none: "暂无数据！",
                    error: "网络异常！"
                }
            });
        }
    });
</script>